<template>
  <div class="back-header">
    <div class="left">
      <van-icon
        name="arrow-left"
        size="20"
        @click="handleBack"
        class="back-icon"
      />
      <div class="title-wrapper">
        <slot name="icon">
          <van-icon :name="icon" :size="iconSize" v-if="icon" />
        </slot>
        <span class="title" :style="titleStyle">{{ title }}</span>
      </div>
    </div>
    <div class="right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { computed } from "vue";
const router = useRouter();

const props = defineProps({
  title: {
    type: String,
    required: true,
  },
  icon: {
    type: String,
    default: "",
  },
  iconSize: {
    type: [String, Number],
    default: 24,
  },
  // 可以自定义返回行为
  customBack: {
    type: Function,
    default: null,
  },
  // 新增标题字体大小属性
  titleSize: {
    type: [String, Number],
    default: 20,
  },
  // 新增标题是否加粗属性
  titleBold: {
    type: Boolean,
    default: true,
  },
});

// 计算标题样式
const titleStyle = computed(() => {
  return {
    fontSize:
      typeof props.titleSize === "number"
        ? `${props.titleSize}px`
        : props.titleSize,
    fontWeight: props.titleBold ? "600" : "normal",
  };
});

const handleBack = () => {
  if (props.customBack) {
    props.customBack();
  } else {
    router.push("/learning");
  }
};
</script>

<style scoped>
.back-header {
  padding: 16px 20px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  
  /* 添加固定定位 */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 1000;
}

.left {
  display: flex;
  align-items: center;
  gap: 4px;
}

.back-icon {
  padding: 4px 8px 4px 0;
  cursor: pointer;
}

.title-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.title {
  color: #2c3e50;
}

/* 适配暗色模式 */
@media (prefers-color-scheme: dark) {
  .back-header {
    background-color: #2c2c2c;
  }

  .title {
    color: #fff;
  }

  .back-icon {
    color: #fff;
  }
}
</style>
